<template>
  <div class="buyer_info_page">
    <div class="buyer_info">
      <p class="detail_title">买家信息</p>
      <ul class="buyer_list">
        <li>
          <p>买家账户:</p>
          <p>{{ dialogData.customerName }}</p>
        </li>
        <li>
          <p>联系电话:</p>
          <p>{{ dialogData.phone }}</p>
        </li>
        <li>
          <p>邮箱:</p>
          <p>{{ dialogData.email }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'

const props = defineProps<{
  dialog: {
    customerName?: string
    phone?: string
    email?: string
  }
}>()

const { dialog } = toRefs(props)
const dialogData = ref<{
  customerName?: string
  phone?: string
  email?: string
}>({})

// 初始化数据
dialogData.value = dialog.value || {}
</script>

<style lang="scss" scoped>
.buyer_info_page {
  .detail_title {
    font-size: 20px;
    color: #333333;
    position: relative;
    margin: 30px 20px 20px;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 5px;
      left: -20px;
      width: 4px;
      height: 20px;
      background-color: #3a68f2;
    }
  }

  .buyer_info {
    .buyer_list {
      padding-left: 20px;
      overflow: hidden;
      list-style: none;

      li {
        float: left;
        width: calc(100% / 2);
        margin-bottom: 20px;

        p {
          margin: 0;
          padding: 0;
          display: inline-block;
          font-size: 16px;
          color: #333333;

          &:nth-child(1) {
            margin-right: 20px;
          }

          &:nth-child(2) {
            color: #666666;
          }
        }
      }
    }
  }
}
</style>